CSS கிரிட் ட்ராக் ஃபங்ஷன்கள்: டைனமிக் லேஅவுட் அளவைக் கையாளுதல்

CSS கிரிட் என்பது ஒரு சக்திவாய்ந்த லேஅவுட் அமைப்பாகும், இது வலை உருவாக்குநர்கள் சிக்கலான மற்றும் ரெஸ்பான்சிவ் டிசைன்களை எளிதாக உருவாக்க அனுமதிக்கிறது. CSS கிரிட்டின் நெகிழ்வுத்தன்மையின் மையத்தில் அதன் ட்ராக் ஃபங்ஷன்கள் உள்ளன. fr, minmax(), auto, மற்றும் fit-content() உள்ளிட்ட இந்த ஃபங்ஷன்கள், கிரிட் ட்ராக்குகளின் (வரிசைகள் மற்றும் நெடுவரிசைகள்) அளவை டைனமிக்காக வரையறுப்பதற்கான வழிமுறைகளை வழங்குகின்றன. இந்த ஃபங்ஷன்களைப் புரிந்துகொள்வது CSS கிரிட்டில் தேர்ச்சி பெறுவதற்கும், வெவ்வேறு திரை அளவுகள் மற்றும் உள்ளடக்க மாறுபாடுகளுக்கு ஏற்ப தடையின்றி பொருந்தக்கூடிய லேஅவுட்களை உருவாக்குவதற்கும் முக்கியமானது.

கிரிட் ட்ராக்குகளைப் புரிந்துகொள்ளுதல்

குறிப்பிட்ட ட்ராக் ஃபங்ஷன்களுக்குள் செல்வதற்கு முன், கிரிட் ட்ராக்குகள் என்றால் என்ன என்பதைப் புரிந்துகொள்வது அவசியம். ஒரு கிரிட் ட்ராக் என்பது எந்த இரண்டு கிரிட் கோடுகளுக்கும் இடையிலான இடைவெளி ஆகும். நெடுவரிசைகள் செங்குத்து ட்ராக்குகள், மற்றும் வரிசைகள் கிடைமட்ட ட்ராக்குகள். இந்த ட்ராக்குகளின் அளவு, கிரிட்டிற்குள் உள்ளடக்கம் எவ்வாறு விநியோகிக்கப்படுகிறது என்பதை தீர்மானிக்கிறது.

fr யூனிட்: பின்னவெளி

fr யூனிட் என்பது கிரிட் கண்டெய்னரில் கிடைக்கும் இடத்தின் ஒரு பின்னத்தைக் குறிக்கிறது. இது நெடுவரிசைகள் அல்லது வரிசைகள் மீதமுள்ள இடத்தை விகிதாசாரமாகப் பகிர்ந்து கொள்ளும் நெகிழ்வான லேஅவுட்களை உருவாக்குவதற்கான ஒரு சக்திவாய்ந்த கருவியாகும். மற்ற அனைத்து நிலையான அளவு ட்ராக்குகளும் கணக்கிடப்பட்ட பிறகு, கிடைக்கும் இடத்தைப் பிரிப்பதற்கான ஒரு வழியாக இதை நினையுங்கள்.

fr எவ்வாறு செயல்படுகிறது

நீங்கள் fr ஐப் பயன்படுத்தி ஒரு கிரிட் ட்ராக் அளவை வரையறுக்கும்போது, பிரவுசர் நிலையான அளவு ட்ராக்குகளின் (எ.கா., பிக்சல்கள், ems) அளவை மொத்த கிரிட் கண்டெய்னர் அளவிலிருந்து கழிப்பதன் மூலம் கிடைக்கும் இடத்தைக் கணக்கிடுகிறது. மீதமுள்ள இடம் பின்னர் fr யூனிட்டுகளுக்கு அவற்றின் விகிதங்களின்படி பிரிக்கப்படுகிறது.

எடுத்துக்காட்டு: சமமான நெடுவரிசைகள்

மூன்று சம-அகல நெடுவரிசைகளை உருவாக்க, நீங்கள் பின்வரும் CSS-ஐப் பயன்படுத்தலாம்:

            .grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

            

              
                Copy
              
            
          

இந்தக் குறியீடு கிடைக்கும் இடத்தை மூன்று நெடுவரிசைகளுக்கும் சமமாகப் பிரிக்கிறது. கிரிட் கண்டெய்னர் 600px அகலமாக இருந்தால், ஒவ்வொரு நெடுவரிசையும் 200px அகலமாக இருக்கும் (இடைவெளிகள் அல்லது பார்டர்கள் இல்லை என்று ধরেக்கொண்டால்).

எடுத்துக்காட்டு: விகிதாசார நெடுவரிசைகள்

வெவ்வேறு விகிதாச்சாரங்களைக் கொண்ட நெடுவரிசைகளை உருவாக்க, நீங்கள் வெவ்வேறு fr மதிப்புகளைப் பயன்படுத்தலாம்:

            .grid-container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
}

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், முதல் நெடுவரிசை மற்ற இரண்டு நெடுவரிசைகளை விட இரண்டு மடங்கு அதிக இடத்தை எடுத்துக் கொள்ளும். கிரிட் கண்டெய்னர் 600px அகலமாக இருந்தால், முதல் நெடுவரிசை 300px அகலமாகவும், மற்ற இரண்டு நெடுவரிசைகள் ஒவ்வொன்றும் 150px அகலமாகவும் இருக்கும்.

நடைமுறை பயன்பாடு: ரெஸ்பான்சிவ் சைட் பார் லேஅவுட்

ரெஸ்பான்சிவ் சைட் பார் லேஅவுட்களை உருவாக்குவதற்கு fr யூனிட் குறிப்பாக பயனுள்ளதாக இருக்கும். ஒரு நிலையான-அகல சைட் பார் மற்றும் ஒரு நெகிழ்வான முக்கிய உள்ளடக்கப் பகுதியுடன் கூடிய ஒரு லேஅவுட்டைக் கவனியுங்கள்:

            .grid-container {
  display: grid;
  grid-template-columns: 200px 1fr;
}

.sidebar {
  /* Sidebar styles */
}

.main-content {
  /* Main content styles */
}

            

              
                Copy
              
            
          

இந்த அமைப்பில், சைட் பார் எப்போதும் 200px அகலமாக இருக்கும், அதே நேரத்தில் முக்கிய உள்ளடக்கப் பகுதி மீதமுள்ள இடத்தை நிரப்ப விரிவடையும். இந்த லேஅவுட் வெவ்வேறு திரை அளவுகளுக்கு தானாகவே பொருந்துகிறது, இது உள்ளடக்கம் எப்போதும் உகந்ததாக காட்டப்படுவதை உறுதி செய்கிறது.

minmax() ஃபங்ஷன்: நெகிழ்வான அளவு கட்டுப்பாடுகள்

minmax() ஃபங்ஷன் ஒரு கிரிட் ட்ராக்கிற்கான ஏற்றுக்கொள்ளக்கூடிய அளவுகளின் வரம்பை வரையறுக்கிறது. இது இரண்டு வாதங்களை எடுக்கும்: ஒரு குறைந்தபட்ச அளவு மற்றும் ஒரு அதிகபட்ச அளவு.

            minmax(min, max)

            

              
                Copy
              
            
          

கிரிட் ட்ராக் எப்போதும் குறைந்தபட்ச அளவிலாவது இருக்கும், ஆனால் இடம் கிடைத்தால் அது அதிகபட்ச அளவு வரை வளரலாம். இந்த ஃபங்ஷன் மாறுபடும் உள்ளடக்க நீளங்கள் மற்றும் திரை அளவுகளுக்கு ஏற்ப பொருந்தக்கூடிய ரெஸ்பான்சிவ் லேஅவுட்களை உருவாக்குவதற்கு விலைமதிப்பற்றது.

எடுத்துக்காட்டு: நெடுவரிசை அகலத்தைக் கட்டுப்படுத்துதல்

ஒரு நெடுவரிசை மிகவும் குறுகலாகவோ அல்லது மிகவும் அகலமாகவோ மாறாமல் இருப்பதை உறுதி செய்ய, நீங்கள் minmax() ஐப் பயன்படுத்தலாம்:

            .grid-container {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) 1fr;
}

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், முதல் நெடுவரிசை குறைந்தது 200px அகலமாக இருக்கும், ஆனால் அது கிடைக்கும் இடத்தை நிரப்ப வளரலாம், இது 1fr ஆல் வரையறுக்கப்பட்ட மீதமுள்ள இடத்தின் ஒரு பகுதி வரை. இது நெடுவரிசை சிறிய திரைகளில் மிகவும் குறுகலாகவோ அல்லது பெரிய திரைகளில் அதிக அகலமாகவோ மாறுவதைத் தடுக்கிறது. இரண்டாவது நெடுவரிசை மீதமுள்ள இடத்தை ஒரு பின்னமாக ஆக்கிரமிக்கிறது.

எடுத்துக்காட்டு: உள்ளடக்க வழிதலைத் தடுத்தல்

minmax() அதன் கண்டெய்னரிலிருந்து உள்ளடக்கம் வழிவதைத் தடுக்கவும் பயன்படுத்தப்படலாம். மாறுபட்ட அளவு உரையைக் கொண்டிருக்க வேண்டிய ஒரு நெடுவரிசை உங்களிடம் இருக்கும் ஒரு சூழ்நிலையைக் கவனியுங்கள்:

            .grid-container {
  display: grid;
  grid-template-columns: 100px minmax(150px, auto) 100px;
}

            

              
                Copy
              
            
          

இங்கே, நடு நெடுவரிசை குறைந்தது 150px அகலமாக இருக்கும். உள்ளடக்கத்திற்கு அதிக இடம் தேவைப்பட்டால், நெடுவரிசை அதை સમાக்க விரிவடையும். அதிகபட்ச மதிப்பாக auto கீவேர்ட் ட்ராக்கை அதன் உள்ளடக்கத்தின் அடிப்படையில் அளவிடச் சொல்கிறது, இது உள்ளடக்கம் ஒருபோதும் வழிந்து செல்லாமல் இருப்பதை உறுதி செய்கிறது. பக்கத்திலுள்ள இரண்டு நெடுவரிசைகளும் 100px அகலத்தில் நிலையானதாக இருக்கும்.

நடைமுறை பயன்பாடு: ரெஸ்பான்சிவ் படத்தொகுப்பு

படங்களை ஒரு வரிசையில் காட்ட விரும்பும் ஒரு படத்தொகுப்பை உருவாக்குவதைக் கவனியுங்கள், ஆனால் அவை சிறிய திரைகளில் மிகவும் சிறியதாகவோ அல்லது பெரிய திரைகளில் மிகவும் பெரியதாகவோ மாறாமல் இருப்பதை உறுதி செய்ய விரும்புகிறீர்கள்:

            .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-gap: 10px;
}

.grid-item {
  /* Image styles */
}

            

              
                Copy
              
            
          

`repeat(auto-fit, minmax(150px, 1fr))` என்பது ஒரு சக்திவாய்ந்த கலவையாகும். `auto-fit` தானாகவே கிடைக்கும் இடத்தின் அடிப்படையில் நெடுவரிசைகளின் எண்ணிக்கையை சரிசெய்கிறது. `minmax(150px, 1fr)` ஒவ்வொரு படமும் குறைந்தது 150px அகலமாக இருப்பதை உறுதிசெய்கிறது மற்றும் கிடைக்கும் இடத்தை நிரப்ப வளரலாம். இது வெவ்வேறு திரை அளவுகளுக்கு ஏற்ப பொருந்தக்கூடிய ஒரு ரெஸ்பான்சிவ் படத்தொகுப்பை உருவாக்குகிறது, இது ஒரு சீரான பார்வை அனுபவத்தை வழங்குகிறது. படங்கள் சிதைவு இல்லாமல் இடத்தை சரியாக நிரப்புவதை உறுதி செய்ய `.grid-item` CSS-க்கு `object-fit: cover;` ஐச் சேர்ப்பதைக் கருத்தில் கொள்ளுங்கள்.

auto கீவேர்ட்: உள்ளடக்கம் சார்ந்த அளவு

auto கீவேர்ட் கிரிட்டிற்குள் இருக்கும் உள்ளடக்கத்தின் அடிப்படையில் ட்ராக்கை அளவிட அறிவுறுத்துகிறது. ட்ராக் உள்ளடக்கத்திற்கு பொருந்தும் வகையில் விரிவடையும், ஆனால் அது உள்ளடக்கத்தின் குறைந்தபட்ச அளவை விட சிறியதாக சுருங்காது.

auto எவ்வாறு செயல்படுகிறது

நீங்கள் auto ஐப் பயன்படுத்தும்போது, கிரிட் ட்ராக்கின் அளவு அதன் உள்ளடக்கத்தின் உள்ளார்ந்த அளவால் தீர்மானிக்கப்படுகிறது. உள்ளடக்க அளவு கணிக்க முடியாததாகவோ அல்லது மாறுபடும் போதோ இது குறிப்பாக பயனுள்ளதாக இருக்கும்.

எடுத்துக்காட்டு: உரைக்கான நெகிழ்வான நெடுவரிசை

மாறுபட்ட அளவு உரைக்கு இடமளிக்க வேண்டிய ஒரு நெடுவரிசையைக் கொண்ட ஒரு லேஅவுட்டைக் கவனியுங்கள்:

            .grid-container {
  display: grid;
  grid-template-columns: 200px auto 1fr;
}

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், முதல் நெடுவரிசை 200px அகலத்தில் நிலையானது. இரண்டாவது நெடுவரிசை auto ஆக அமைக்கப்பட்டுள்ளது, எனவே அது அதன் உள்ளடக்கமான உரைக்குப் பொருந்தும் வகையில் விரிவடையும். மூன்றாவது நெடுவரிசை மீதமுள்ள இடத்தை ஒரு பின்னமாகப் பயன்படுத்துகிறது, மற்றும் நெகிழ்வானது.

எடுத்துக்காட்டு: மாறுபட்ட உயரத்துடன் கூடிய வரிசைகள்

நீங்கள் வரிசைகளுக்கும் auto ஐப் பயன்படுத்தலாம். உயரத்தில் மாறுபடக்கூடிய உள்ளடக்கத்துடன் கூடிய வரிசைகள் உங்களிடம் இருக்கும்போது இது பயனுள்ளதாக இருக்கும்:

            .grid-container {
  display: grid;
  grid-template-rows: auto auto auto;
}

            

              
                Copy
              
            
          

இந்த வழக்கில், ஒவ்வொரு வரிசையும் அதன் உள்ளடக்கத்திற்கு இடமளிக்க அதன் உயரத்தை தானாகவே சரிசெய்யும். இது வலைப்பதிவு இடுகைகள் அல்லது மாறுபட்ட அளவு உரை மற்றும் படங்களுடன் கூடிய கட்டுரைகள் போன்ற டைனமிக் உள்ளடக்கத்துடன் கூடிய லேஅவுட்களை உருவாக்குவதற்கு உதவியாக இருக்கும்.

நடைமுறை பயன்பாடு: ரெஸ்பான்சிவ் நேவிகேஷன் மெனு

ஒவ்வொரு மெனு உருப்படியின் அகலமும் அதன் உள்ளடக்கத்தின் அடிப்படையில் சரிசெய்யப்படும் ஒரு ரெஸ்பான்சிவ் நேவிகேஷன் மெனுவை உருவாக்க நீங்கள் auto ஐப் பயன்படுத்தலாம்:

            .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, auto);
  grid-gap: 10px;
}

.menu-item {
  /* Menu item styles */
}

            

              
                Copy
              
            
          

`repeat(auto-fit, auto)` ஐப் பயன்படுத்துவது மெனு உருப்படிகளுக்குப் பொருந்தும் வகையில் தேவையான பல நெடுவரிசைகளை உருவாக்கும், ஒவ்வொரு உருப்படியின் அகலமும் அதன் உள்ளடக்கத்தால் தீர்மானிக்கப்படும். `auto-fit` கீவேர்ட் உருப்படிகள் சிறிய திரைகளில் அடுத்த வரிக்கு மடங்குவதை உறுதி செய்கிறது. சரியான காட்சி மற்றும் அழகியலுக்காக `menu-item` ஐ ஸ்டைல் செய்யவும் நினைவில் கொள்ளுங்கள்.

fit-content() ஃபங்ஷன்: உள்ளடக்கம் சார்ந்த அளவைக் கட்டுப்படுத்துதல்

fit-content() ஃபங்ஷன் அதன் உள்ளடக்கத்தின் அடிப்படையில் ஒரு கிரிட் ட்ராக்கின் அளவைக் கட்டுப்படுத்த ஒரு வழியை வழங்குகிறது. இது ஒரு ஒற்றை வாதத்தை எடுக்கும்: ட்ராக் ஆக்கிரமிக்கக்கூடிய அதிகபட்ச அளவு. ட்ராக் உள்ளடக்கத்திற்குப் பொருந்தும் வகையில் விரிவடையும், ஆனால் அது குறிப்பிட்ட அதிகபட்ச அளவைத் தாண்டாது.

            fit-content(max-size)

            

              
                Copy
              
            
          

fit-content() எவ்வாறு செயல்படுகிறது

fit-content() ஃபங்ஷன் அதன் உள்ளடக்கத்தின் அடிப்படையில் கிரிட் ட்ராக்கின் அளவைக் கணக்கிடுகிறது. இருப்பினும், அது ட்ராக்கின் அளவு ஃபங்ஷனின் வாதத்தில் குறிப்பிடப்பட்ட அதிகபட்ச அளவைத் தாண்டாமல் இருப்பதை உறுதி செய்கிறது.

எடுத்துக்காட்டு: நெடுவரிசை விரிவாக்கத்தைக் கட்டுப்படுத்துதல்

ஒரு நெடுவரிசை அதன் உள்ளடக்கத்திற்குப் பொருந்தும் வகையில் விரிவடைய வேண்டும், ஆனால் அது மிகவும் அகலமாக மாறக்கூடாது என்று நீங்கள் விரும்பும் ஒரு லேஅவுட்டைக் கவனியுங்கள்:

            .grid-container {
  display: grid;
  grid-template-columns: 100px fit-content(300px) 1fr;
}

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், இரண்டாவது நெடுவரிசை அதன் உள்ளடக்கத்திற்குப் பொருந்தும் வகையில் விரிவடையும், ஆனால் அது 300px அகலத்தைத் தாண்டாது. உள்ளடக்கத்திற்கு 300px-க்கு மேல் தேவைப்பட்டால், நெடுவரிசை 300px-ல் வெட்டப்படும் (நீங்கள் கிரிட் உருப்படியில் `overflow: visible` ஐ அமைக்காத வரை). முதல் நெடுவரிசை ஒரு நிலையான அகலத்தில் உள்ளது, மற்றும் இறுதி நெடுவரிசை மீதமுள்ள இடத்தை ஒரு பின்னமாகப் பெறுகிறது.

எடுத்துக்காட்டு: வரிசை உயரத்தைக் கட்டுப்படுத்துதல்

நீங்கள் வரிசைகளின் உயரத்தைக் கட்டுப்படுத்த `fit-content()` ஐயும் பயன்படுத்தலாம்:

            .grid-container {
  display: grid;
  grid-template-rows: fit-content(200px) 1fr;
}

            

              
                Copy
              
            
          

இங்கே, முதல் வரிசை அதன் உள்ளடக்கத்திற்குப் பொருந்தும் வகையில் விரிவடையும், ஆனால் அது 200px உயரத்தைத் தாண்டாது. இரண்டாவது வரிசை மீதமுள்ள இடத்தை மொத்த கிடைக்கும் உயரத்தின் ஒரு பின்னமாக எடுத்துக் கொள்ளும்.

நடைமுறை பயன்பாடு: ரெஸ்பான்சிவ் கார்டு லேஅவுட்

ரெஸ்பான்சிவ் கார்டு லேஅவுட்களை உருவாக்குவதற்கு fit-content() பயனுள்ளதாக இருக்கும், அங்கு நீங்கள் கார்டுகள் அவற்றின் உள்ளடக்கத்திற்குப் பொருந்தும் வகையில் விரிவடைய வேண்டும், ஆனால் அவற்றின் அகலத்தைக் கட்டுப்படுத்த விரும்புகிறீர்கள்:

            .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, fit-content(300px)));
  grid-gap: 10px;
}

.card {
  /* Card styles */
}

            

              
                Copy
              
            
          

இந்தக் குறியீடு ஒரு ரெஸ்பான்சிவ் கார்டு லேஅவுட்டை உருவாக்குகிறது, அங்கு ஒவ்வொரு கார்டும் குறைந்தது 200px அகலமாக இருக்கும் மற்றும் அதன் உள்ளடக்கத்திற்குப் பொருந்தும் வகையில் விரிவடையலாம், அதிகபட்சமாக 300px வரை. `repeat(auto-fit, ...)` கார்டுகள் சிறிய திரைகளில் அடுத்த வரிக்கு மடங்குவதை உறுதி செய்கிறது. ரிப்பீட் ஃபங்ஷனுக்குள், `fit-content` உடன் `minmax` ஐப் பயன்படுத்துவது இன்னும் உயர் மட்டக் கட்டுப்பாட்டை வழங்குகிறது - உருப்படிகள் எப்போதும் 200px குறைந்தபட்ச அகலத்தைக் கொண்டிருக்கும், ஆனால் 300px-ஐ விட அகலமாக இருக்காது (உள்ளிருக்கும் உள்ளடக்கம் இந்த மதிப்பைத் தாண்டவில்லை என்று ধরেக்கொண்டால்) என்பதை உறுதி செய்கிறது. இந்த உத்தி வெவ்வேறு திரை அளவுகளில் ஒரு சீரான தோற்றத்தையும் உணர்வையும் நீங்கள் விரும்பினால் குறிப்பாக மதிப்புமிக்கது. விரும்பிய தோற்றத்தை அடைய `.card` வகுப்பை பொருத்தமான பேடிங், மார்ஜின் மற்றும் பிற காட்சி பண்புகளுடன் ஸ்டைல் செய்ய மறக்காதீர்கள்.

மேம்பட்ட லேஅவுட்களுக்கு ட்ராக் ஃபங்ஷன்களை இணைத்தல்

CSS கிரிட் ட்ராக் ஃபங்ஷன்களின் உண்மையான சக்தி சிக்கலான மற்றும் டைனமிக் லேஅவுட்களை உருவாக்க அவற்றை இணைப்பதில் இருந்து வருகிறது. fr, minmax(), auto, மற்றும் fit-content() ஐ மூலோபாய ரீதியாகப் பயன்படுத்துவதன் மூலம், நீங்கள் பரந்த அளவிலான ரெஸ்பான்சிவ் மற்றும் நெகிழ்வான டிசைன்களை அடையலாம்.

எடுத்துக்காட்டு: கலப்பு யூனிட்கள் மற்றும் ஃபங்ஷன்கள்

ஒரு நிலையான-அகல சைட் பார், ஒரு நெகிழ்வான முக்கிய உள்ளடக்கப் பகுதி, மற்றும் அதன் உள்ளடக்கத்திற்குப் பொருந்தும் வகையில் விரிவடையும் ஆனால் அதிகபட்ச அகலத்தைக் கொண்ட ஒரு நெடுவரிசையுடன் கூடிய ஒரு லேஅவுட்டைக் கவனியுங்கள்:

            .grid-container {
  display: grid;
  grid-template-columns: 200px 1fr fit-content(400px);
}

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், முதல் நெடுவரிசை 200px-ல் நிலையானது. இரண்டாவது நெடுவரிசை 1fr ஐப் பயன்படுத்தி மீதமுள்ள இடத்தை எடுத்துக் கொள்கிறது. மூன்றாவது நெடுவரிசை அதன் உள்ளடக்கத்திற்குப் பொருந்தும் வகையில் விரிவடைகிறது, ஆனால் fit-content(400px) ஐப் பயன்படுத்தி 400px அதிகபட்ச அகலத்திற்கு மட்டுப்படுத்தப்பட்டுள்ளது.

எடுத்துக்காட்டு: சிக்கலான ரெஸ்பான்சிவ் டிசைன்

ஒரு ஹெடர், சைட் பார், முக்கிய உள்ளடக்கம் மற்றும் ஃபூட்டருடன் கூடிய ஒரு வலைத்தள லேஅவுட்டின் மிகவும் சிக்கலான உதாரணத்தை உருவாக்குவோம்:

            .grid-container {
  display: grid;
  grid-template-columns: minmax(150px, 250px) 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  height: 100vh;
}

header {
  grid-area: header;
  /* Header styles */
}

.sidebar {
  grid-area: sidebar;
  /* Sidebar styles */
}

main {
  grid-area: main;
  /* Main content styles */
}

footer {
  grid-area: footer;
  /* Footer styles */
}

            

              
                Copy
              
            
          

இந்த லேஅவுட்டில்:

• grid-template-columns இரண்டு நெடுவரிசைகளை வரையறுக்கிறது: 150px குறைந்தபட்ச அகலம் மற்றும் 250px அதிகபட்ச அகலம் கொண்ட ஒரு சைட் பார், மற்றும் 1fr ஐப் பயன்படுத்தி மீதமுள்ள இடத்தை எடுத்துக் கொள்ளும் ஒரு முக்கிய உள்ளடக்கப் பகுதி.
• grid-template-rows மூன்று வரிசைகளை வரையறுக்கிறது: அவற்றின் உள்ளடக்கத்திற்குப் பொருந்தும் வகையில் (auto) தங்கள் உயரத்தை தானாகவே சரிசெய்யும் ஒரு ஹெடர் மற்றும் ஃபூட்டர், மற்றும் 1fr ஐப் பயன்படுத்தி மீதமுள்ள செங்குத்து இடத்தை எடுத்துக் கொள்ளும் ஒரு முக்கிய உள்ளடக்கப் பகுதி.
• grid-template-areas ப்ராப்பர்டி பெயரிடப்பட்ட கிரிட் பகுதிகளைப் பயன்படுத்தி லேஅவுட் கட்டமைப்பை வரையறுக்கிறது.

இந்த எடுத்துக்காட்டு ஒரு நெகிழ்வான மற்றும் ரெஸ்பான்சிவ் வலைத்தள லேஅவுட்டை உருவாக்க ட்ராக் ஃபங்ஷன்கள் மற்றும் கிரிட் பகுதிகளை எவ்வாறு இணைப்பது என்பதைக் காட்டுகிறது. சரியான காட்சி விளக்கக்காட்சியை உறுதி செய்ய ஒவ்வொரு பகுதிக்கும் (ஹெடர், சைட் பார், மெயின், ஃபூட்டர்) பொருத்தமான ஸ்டைலிங்கைச் சேர்க்க நினைவில் கொள்ளுங்கள்.

CSS கிரிட் ட்ராக் ஃபங்ஷன்களைப் பயன்படுத்துவதற்கான சிறந்த நடைமுறைகள்

CSS கிரிட் ட்ராக் ஃபங்ஷன்களிலிருந்து சிறந்ததைப் பெற, பின்வரும் சிறந்த நடைமுறைகளைக் கருத்தில் கொள்ளுங்கள்:

• உள்ளடக்கத்திற்கு முன்னுரிமை கொடுங்கள்: ட்ராக் அளவுகளைத் தீர்மானிக்கும்போது எப்போதும் உள்ளடக்கத்திற்கு முன்னுரிமை கொடுங்கள். லேஅவுட் உள்ளடக்கத்திற்கு ஏற்ப இருக்க வேண்டும், வேறு வழியில்லை.
• ரெஸ்பான்சிவ்னஸிற்காக minmax() ஐப் பயன்படுத்தவும்: கிரிட் ட்ராக்குகளுக்கு ஏற்றுக்கொள்ளக்கூடிய அளவுகளின் வரம்பை வரையறுக்க minmax() ஐப் பயன்படுத்தவும், அவை வெவ்வேறு திரை அளவுகள் மற்றும் உள்ளடக்க மாறுபாடுகளுக்கு ஏற்ப இருப்பதை உறுதி செய்கிறது.
• ஃபங்ஷன்களை மூலோபாய ரீதியாக இணைக்கவும்: சிக்கலான மற்றும் டைனமிக் லேஅவுட்களை உருவாக்க ட்ராக் ஃபங்ஷன்களை இணைக்கவும். உதாரணமாக, குறைந்தபட்ச மற்றும் அதிகபட்ச அகலக் கட்டுப்பாடுகளைக் கொண்ட நெகிழ்வான நெடுவரிசைகளை உருவாக்க minmax() மற்றும் fr ஐ ஒன்றாகப் பயன்படுத்தவும்.
• வெவ்வேறு சாதனங்களில் சோதிக்கவும்: உங்கள் லேஅவுட்கள் ரெஸ்பான்சிவ் மற்றும் பார்வைக்கு ஈர்க்கக்கூடியதாக இருப்பதை உறுதி செய்ய எப்போதும் வெவ்வேறு சாதனங்கள் மற்றும் திரை அளவுகளில் சோதிக்கவும்.
• அணுகல்தன்மையைக் கருத்தில் கொள்ளுங்கள்: உங்கள் லேஅவுட்கள் குறைபாடுகள் உள்ளவர்கள் உட்பட அனைத்து பயனர்களுக்கும் அணுகக்கூடியதாக இருப்பதை உறுதி செய்யவும். சொற்பொருள் HTML ஐப் பயன்படுத்தவும் மற்றும் படங்களுக்கு மாற்று உரையை வழங்கவும்.
• கிரிட் இன்ஸ்பெக்டர் கருவிகளைப் பயன்படுத்தவும்: பெரும்பாலான நவீன பிரவுசர்களில் உள்ளமைக்கப்பட்ட கிரிட் இன்ஸ்பெக்டர் கருவிகள் உள்ளன, அவை உங்கள் கிரிட் லேஅவுட்களைக் காட்சிப்படுத்தவும் பிழைத்திருத்தவும் உதவும். ட்ராக் ஃபங்ஷன்கள் உங்கள் லேஅவுட்டை எவ்வாறு பாதிக்கின்றன என்பதைப் புரிந்துகொள்வதற்கு இந்த கருவிகள் விலைமதிப்பற்றவை.

CSS கிரிட்டிற்கான உலகளாவிய கருத்தில் கொள்ள வேண்டியவை

உலகளாவிய பார்வையாளர்களுக்காக வலைத்தளங்களை உருவாக்கும்போது, கலாச்சார வேறுபாடுகள் மற்றும் பிராந்திய மாறுபாடுகளைக் கருத்தில் கொள்வது முக்கியம். CSS கிரிட்டிற்கு குறிப்பிட்ட சில கருத்தில் கொள்ள வேண்டியவை இங்கே:

• லேஅவுட் திசை (direction ப்ராப்பர்டி): direction ப்ராப்பர்டி கிரிட் லேஅவுட்டின் திசையை மாற்றப் பயன்படுத்தப்படலாம். உதாரணமாக, அரபு மற்றும் ஹீப்ரு போன்ற வலமிருந்து இடமாக (RTL) மொழிகளில், லேஅவுட் திசையைத் தலைகீழாக மாற்ற நீங்கள் direction: rtl; ஐ அமைக்கலாம். CSS கிரிட் தானாகவே லேஅவுட் திசைக்கு ஏற்ப பொருந்துகிறது, இது லேஅவுட் வெவ்வேறு மொழிகளில் சரியாகக் காட்டப்படுவதை உறுதி செய்கிறது.
• லாஜிக்கல் ப்ராப்பர்டீஸ் (inset-inline-start, inset-inline-end, ইত্যাদি): left மற்றும் right போன்ற இயற்பியல் பண்புகளைப் பயன்படுத்துவதற்குப் பதிலாக, inset-inline-start மற்றும் inset-inline-end போன்ற லாஜிக்கல் ப்ராப்பர்டீஸ்களைப் பயன்படுத்தவும். இந்த ப்ராப்பர்டீஸ் தானாகவே லேஅவுட் திசைக்கு ஏற்ப பொருந்துகிறது, இது லேஅவுட் LTR மற்றும் RTL ஆகிய இரு மொழிகளிலும் சீராக இருப்பதை உறுதி செய்கிறது.
• எழுத்துரு அளவுகள்: உங்கள் கிரிட் கூறுகளுக்குள் பயன்படுத்தப்படும் எழுத்துரு அளவுகளில் கவனமாக இருங்கள். வெவ்வேறு மொழிகளுக்கு உகந்த வாசிப்புத்திறனுக்காக வெவ்வேறு எழுத்துரு அளவுகள் தேவைப்படலாம். பயனரின் விருப்பங்களின் அடிப்படையில் எழுத்துரு அளவுகள் அளவிட அனுமதிக்க em அல்லது rem போன்ற உறவினர் அலகுகளைப் பயன்படுத்துவதைக் கருத்தில் கொள்ளுங்கள்.
• தேதி மற்றும் எண் வடிவங்கள்: உங்கள் கிரிட் லேஅவுட்டில் தேதிகள் அல்லது எண்கள் இருந்தால், அவற்றை பயனரின் இருப்பிடத்திற்கு சரியாக வடிவமைப்பதை உறுதி செய்யவும். பயனரின் மொழி மற்றும் பிராந்திய அமைப்புகளுக்கு ஏற்ப தேதிகள் மற்றும் எண்களை வடிவமைக்க JavaScript அல்லது ஒரு சர்வர்-சைடு லைப்ரரியைப் பயன்படுத்தவும்.
• படங்கள் மற்றும் ஐகான்கள்: சில படங்கள் மற்றும் ஐகான்கள் வெவ்வேறு கலாச்சாரங்களில் வெவ்வேறு அர்த்தங்களைக் கொண்டிருக்கலாம் என்பதை அறிந்து கொள்ளுங்கள். புண்படுத்தக்கூடிய அல்லது கலாச்சார ரீதியாக உணர்ச்சியற்ற படங்களையோ அல்லது ஐகான்களையோ பயன்படுத்துவதைத் தவிர்க்கவும். உதாரணமாக, ஒரு கலாச்சாரத்தில் நேர்மறையாகக் கருதப்படும் ஒரு கை சைகை மற்றொரு கலாச்சாரத்தில் புண்படுத்துவதாகக் கருதப்படலாம்.
• மொழிபெயர்ப்பு மற்றும் உள்ளூர்மயமாக்கல்: உங்கள் வலைத்தளம் பல மொழிகளில் கிடைத்தால், தலைப்புகள், லேபிள்கள் மற்றும் உள்ளடக்கம் உட்பட உங்கள் கிரிட் லேஅவுட்டிற்குள் உள்ள அனைத்து உரையையும் மொழிபெயர்ப்பதை உறுதி செய்யவும். மொழிபெயர்ப்பு செயல்முறையை நெறிப்படுத்தவும், வெவ்வேறு மொழிகளில் நிலைத்தன்மையை உறுதி செய்யவும் ஒரு மொழிபெயர்ப்பு மேலாண்மை அமைப்பைப் பயன்படுத்துவதைக் கருத்தில் கொள்ளுங்கள்.

முடிவுரை

CSS கிரிட் ட்ராக் ஃபங்ஷன்கள் வெவ்வேறு திரை அளவுகள் மற்றும் உள்ளடக்க மாறுபாடுகளுக்கு ஏற்ப டைனமிக் மற்றும் ரெஸ்பான்சிவ் லேஅவுட்களை உருவாக்குவதற்கான அத்தியாவசிய கருவிகளாகும். fr, minmax(), auto, மற்றும் fit-content() ஆகியவற்றில் தேர்ச்சி பெறுவதன் மூலம், நீங்கள் சிக்கலான மற்றும் நெகிழ்வான லேஅவுட்களை உருவாக்கலாம், அவை அனைத்து சாதனங்கள் மற்றும் தளங்களில் ஒரு சீரான மற்றும் ஈடுபாட்டுடன் கூடிய பயனர் அனுபவத்தை வழங்குகின்றன. உள்ளடக்கத்திற்கு முன்னுரிமை கொடுக்கவும், ரெஸ்பான்சிவ்னஸிற்காக minmax() ஐப் பயன்படுத்தவும், ஃபங்ஷன்களை மூலோபாய ரீதியாக இணைக்கவும், மற்றும் உங்கள் லேஅவுட்கள் பார்வைக்கு ஈர்க்கக்கூடியதாகவும் அனைத்து பயனர்களுக்கும் அணுகக்கூடியதாகவும் இருப்பதை உறுதி செய்ய வெவ்வேறு சாதனங்களில் சோதிக்கவும். மொழி மற்றும் கலாச்சாரத்திற்கான உலகளாவிய கருத்தில் கொள்ள வேண்டியவைகளைக் கருத்தில் கொள்வதன் மூலம், உலகளாவிய பார்வையாளர்களுக்கு அணுகக்கூடிய மற்றும் ஈடுபாட்டுடன் கூடிய வலைத்தளங்களை நீங்கள் உருவாக்கலாம்.

பயிற்சி மற்றும் பரிசோதனையுடன், நீங்கள் CSS கிரிட் ட்ராக் ஃபங்ஷன்களின் முழு சக்தியையும் பயன்படுத்தலாம் மற்றும் உங்கள் வலை மேம்பாட்டுத் திறன்களை உயர்த்தி, உங்கள் பார்வையாளர்களுக்கு சிறந்த பயனர் அனுபவத்தை வழங்கும் பிரமிக்க வைக்கும் மற்றும் ரெஸ்பான்சிவ் லேஅவுட்களை உருவாக்கலாம்.